<template>
    <div>
        <span class="little2">订单</span>
        <el-table :data="orderData" style="width: 100%" border>
            <el-table-column prop="imgUrl" label="产品图片" width="180" align="center">
                <!-- 插槽作用域 -->
                <template v-slot="scope">
                    <el-avatar shape="square" :size="80" fit="scale-down" :src="scope.row.orderDetail[0].imageUrl">
                    </el-avatar>
                </template>
            </el-table-column>
            <el-table-column prop="order_id" label="订单编号" align="center" width="252">
            </el-table-column>
            <el-table-column prop="orderDetail[0].productName" label="产品名称" align="center">
            </el-table-column>
            <el-table-column prop="orderDetail[0].quantity" label="数量" align="center">
            </el-table-column>
            <el-table-column prop="total_fee" label="价格" align="center">
            </el-table-column>
            <el-table-column prop="create_time" label="时间" align="center" width="159">
            </el-table-column>
            <el-table-column prop="pay_status" label="支付状况" align="center">
                <template v-slot="scope">
                    {{ scope.row.pay_status === 1 ? '已支付' : '未支付' }}
                </template>
            </el-table-column>
            <el-table-column prop="order_status" label="订单状况" align="center">
                <template v-slot="{ row }">
                    <span v-if="row.order_status === 0">未提交</span>
                    <span v-else-if="row.order_status === 1">提交成功</span>
                    <span v-else-if="row.order_status === 2">已经取消</span>
                    <span v-else-if="row.order_status === 3">无效订单</span>
                    <span v-else-if="row.order_status === 4">交易关闭</span>
                    <span v-else-if="row.order_status === 5">退货</span>
                </template>
            </el-table-column>
         
            <el-table-column prop="opration" label="操作" align="center" width="240">
                <template v-slot="{ row }">
                    <el-button type="primary" icon="iconfont icon-chongzhi"
                        v-hasPay="[row.pay_status, row.order_status]">去支付 </el-button>
                    <el-button type="danger" icon=" el-icon-delete" @click="del(row.order_id)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>
<script>
import * as api from '@/api/transaction';
export default {
    meta: {
        title: 'order',
        name: '订单',
        icon: 'iconfont icon-dd'
    },
    data() {
        return {
            orderData: []
        }
    },
    created() {
        this.getOrderList()
    },
    methods: {
        getOrderList() {
            api.getOrderApi()
                .then(res => {
                    // console.log(res.data.data)
                    this.orderData = res.data.data
                })
        },
        //删除订单
        del(order_id) {
            api.delOrder(order_id).then((res) => {
                console.log(res);
                //重新获取订单 渲染页面
                this.getOrderList();
                //删除成功提示框
                this.$message({
                    message: res.data.msg,
                    type: "success",
                });
            });
        },
    },
    directives: {
        hasPay: {
            inserted(el, binding) {
                // console.log(binding)
                // console.log(el)
                //pay_status:0未支付 1已支付
                //order_status:订单状态:0未提交 1提交成功 2已经取消 3无效订单 4.交易关闭 5退货
                // 将pay_status, order_status解构出来，binding.value是表达式真实的值
                let [pay_status, order_status] = binding.value;
                // 先保存当前按钮的类名
                let className = el.className;
                // console.log(className)
                if (pay_status !== 1 || order_status !== 1) {
                    el.disabled = true;  //禁用按钮
                    el.className = className + " " + "is-disabled";  //让按钮有禁用样式
                }

            }
        }
    }
}
</script>
<style lang="less" scoped>
/deep/.el-avatar>img {
    width: 100%;
    background-color: #fff;
}
</style>